<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '编辑商品',
  },
}
</route>

<template>
  <view class="min-h-screen p-4">
    <!-- 表单 -->
    <wd-form ref="formRef" :model="form">
      <view class="flex p-4">
        <text class="text-sm w-[100px]">
          <text class="text-red">*</text>
          图片
        </text>
        <wd-upload label="图片" :file-list="fileList" image-mode="aspectFill" :action="action" @change="handleChange"
          :limit="1" name="image"></wd-upload>
      </view>

      <view class="flex p-4">
        <text class="text-sm w-[100px]">
          <text class="text-red">*</text>
          轮播图
        </text>
        <wd-upload label="轮播图" :file-list="fileList1" image-mode="aspectFill" :action="action" @change="handleChange1"
          :limit="6" name="image"></wd-upload>
      </view>

      <wd-input label="名称" label-width="100px" prop="name" clearable v-model="form.name" placeholder="请输入名称"
        :rules="[{ required: true, message: '请填写名称' }]" />

      <wd-picker label="商家分类" v-model="form.cateId" type="radio" prop="classification" placeholder="请选择商家分类"
        label-key="cateName" value-key="id" :rules="[{ required: true, message: '请选择商家分类' }]"
        :columns="categoryList"></wd-picker>

      <!-- 关键词 -->
      <wd-input label="关键词" label-width="100px" prop="keyword" clearable v-model="form.keyword" placeholder="请输入关键词"
        :rules="[{ required: true, message: '请填写关键词' }]" />

      <wd-input label="原价" label-width="100px" prop="price" clearable v-model="form.price" placeholder="请输入原价"
        :rules="[{ required: true, message: '请填写原价' }]" />

      <wd-input label="售价" label-width="100px" prop="vipPrice" clearable v-model="form.vipPrice" placeholder="请输入售价"
        :rules="[{ required: true, message: '请填写售价' }]" />

      <wd-input label="库存" label-width="100px" prop="stock" clearable v-model="form.stock" placeholder="请输入库存"
        :rules="[{ required: true, message: '请填写库存' }]" />

      <wd-input label="销量" label-width="100px" prop="sales" clearable v-model="form.sales" placeholder="请输入销量"
        :rules="[{ required: true, message: '请填写销量' }]" />
      <!-- 拼团 -->
      <wd-picker :columns="[
        { label: '是', value: 2 },
        { label: '否', value: 1 },
      ]" label="是否拼团" v-model="form.isSpell" />

      <wd-input label="拼团价" label-width="100px" prop="spellPrice" clearable v-if="form.isSpell == 2"
        v-model="form.spellPrice" placeholder="请输入拼团价" :rules="[{ required: true, message: '请填写拼团价' }]" />

      <wd-input label="成团人数" label-width="100px" prop="spellNumber" v-if="form.isSpell == 2" clearable
        v-model="form.spellNumber" placeholder="请输入成团人数" :rules="[{ required: true, message: '请填写成团人数' }]" />

      <piaoyiEditor :values="form.info" :maxlength="3000" photoUrl="https://apill.jxsr.com" api="/api/file/uploadImage"
        name="image" @changes="saveContens" />

      <button class="bg-orange text-white w-80 rounded" @click="submit">保存</button>
    </wd-form>
  </view>
</template>

<script setup>
import { http } from '@/utils/http'
import piaoyiEditor from '@/uni_modules/piaoyi-editor/components/piaoyi-editor/piaoyi-editor.vue'

const categoryList = ref(null)
const action = import.meta.env.VITE_SERVER_BASEURL + '/api/file/uploadImage'

const formRef = ref(null)

const mode = ref('add')

const form = ref({
  name: '',
  image: '',
  info: '',
  keyword: '',
  cateId: '',
  price: '',
  vipPrice: '',
  stock: '',
  sales: '',
  isSpell: 1,
  spellPrice: '',
  spellNumber: 2,
  heelSpellNumber: 0, //虚拟人数
})

const id = ref('')
const fileList = ref([])
const fileList1 = ref([])

const initForm = async () => {
  let res = await http.get('/api/home/categories')
  if (res.code == 200) {
    categoryList.value = res.data.categories
  }
}

const handleChange = ({ fileList }) => {
  let response = fileList[0].response
  let data = JSON.parse(response)
  form.value.image = data.url
}

const handleChange1 = ({ fileList }) => {
  form.value.sliderImage = fileList.map((item) => JSON.parse(item.response).url).join(',')
}

const saveContens = (e) => {
  form.value.info = e.html
}

const submit = async () => {
  if (mode.value == 'add') {
    let res = await http.post('/api/home/add', form.value)
    if (res.code == 200) {
      uni.showToast({
        title: res.msg,
        icon: 'none',
        duration: 2000,
      })

      setTimeout(() => {
        uni.navigateBack()
      }, 2000)
    }
  } else {
    let res = await http.post('/api/home/update', { ...form.value, id: id.value })
    if (res.code == 200) {
      uni.showToast({
        title: res.msg,
        icon: 'none',
        duration: 2000,
      })

      setTimeout(() => {
        uni.navigateBack()
      }, 2000)
    }
  }
}

const getProduct = async (id) => {
  let res = await http.get('/api/home/productDetails', { id })
  if (res.code == 200) {
    form.value.name = res.data.product.name
    form.value.image = res.data.product.image
    form.value.info = res.data.product.info
    form.value.keyword = res.data.product.keyword
    form.value.cateId = res.data.product.cateId
    form.value.price = res.data.product.price
    form.value.vipPrice = res.data.product.vipPrice
    form.value.stock = res.data.product.stock
    form.value.sales = res.data.product.sales
    form.value.isSpell = res.data.product.isSpell
    form.value.spellPrice = res.data.product.spellPrice
    form.value.spellNumber = res.data.product.spellNumber
    form.value.heelSpellNumber = res.data.product.heelSpellNumber
    form.value.sliderImage = res.data.product.sliderImage

    fileList1.value = form.value.sliderImage.split(',').map((item) => {
      return {
        url: item,
      }
    })

    if (form.value.image) {
      fileList.value = [
        {
          url: form.value.image,
        },
      ]
    } else {
      fileList.value = []
    }
  }
}

onLoad(async (option) => {
  if (option.mode) {
    mode.value = option.mode
  }

  await initForm()

  if (option.id) {
    id.value = option.id
    await getProduct(option.id)
  }


})
</script>

<style lang="scss" scoped>
//</style>
